<template>

  <el-scrollbar>

    <div style="display: flex;flex-direction: column;align-items: center;padding-bottom: 200px">

      <DataCard style="width: 1000px">
        <template v-slot:header>
          <p style="position: relative;margin-bottom: 36px;">
            <span>修改头像</span>
            <el-icon :size="30" style="position: absolute;right: 0;"><Setting /></el-icon>
          </p>
        </template>
        <img :src="user_head_img_url" alt="图片"
             style="width: 160px;height: 160px;object-fit: cover;object-position: center top;border-radius: 50%;margin: 1rem 0">
        <template v-slot:footer>
          <el-upload :auto-upload="false" :show-file-list="false"
                     :on-change="changeImg" :on-preview="handlePictureCardPreview" style="display: inline;margin-right: 24px">
            <el-button  @click="">
              <span class="button-text">选择图片</span>
            </el-button>
          </el-upload>
          <el-button @click="updateImg" style="padding: 8px 28px;" type="primary">确定</el-button>
        </template>
      </DataCard>

      <DataCard style="width: 1000px">
        <template v-slot:header>
          <p style="position: relative;margin-bottom: 36px;">
            <span>修改昵称</span>
            <el-icon :size="30" style="position: absolute;right: 0;"><Setting /></el-icon>
          </p>
        </template>
        <p class="data-card-p">
          <el-input class="data-card-input" placeholder="请输入个人简介" v-model="user_desc" clearable></el-input>
        </p>
        <template v-slot:footer>
          <el-button @click="updateUserDesc" style="padding: 8px 28px;" type="primary">确定</el-button>
        </template>
      </DataCard>

      <DataCard style="width: 1000px">
        <template v-slot:header>
          <p style="position: relative;margin-bottom: 36px;">
            <span>修改密码</span>
            <el-icon :size="30" style="position: absolute;right: 0;"><Key /></el-icon>
          </p>
        </template>
        <p class="data-card-p">
          <el-input class="data-card-input" placeholder="请输入旧密码" v-model="oldPassword" show-password></el-input>
          <el-input class="data-card-input" placeholder="请输入新密码" v-model="newPassword" show-password></el-input>
          <el-input class="data-card-input" placeholder="请输入新密码" v-model="newPassword2" show-password></el-input>
        </p>
        <template v-slot:footer>
          <el-button @click="updatePassword" style="padding: 8px 28px;" type="primary">确定</el-button>
        </template>
      </DataCard>

    </div>

  </el-scrollbar>

</template>

<script setup>
import DataCard from "../../components/common/DataCard.vue";
import {ref} from "vue";
import {useUserInfoStore} from "../../store/UserInfoStore";

const userInfoStore = useUserInfoStore();

const user_head_img_url = ref('../../../src/assets/img/default_head.png');
const user_head_img_file = ref(void 0)

function changeImg(file){
  user_head_img_url.value = URL.createObjectURL(file.raw);
  user_head_img_file.value = file;
}

function handlePictureCardPreview(uploadFile){

}

function updateImg(){

}

const user_desc = ref(userInfoStore.userInfo.profile)

function updateUserDesc(){

}

const oldPassword = ref('');
const newPassword = ref('');
const newPassword2 = ref('');

function updatePassword(){

}

</script>

<style scoped>

.data-card-p{
  display: flex;
  flex-direction: column;
}

.data-card-input{
  margin: 12px 0;
}

</style>